<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page import="com.lanqiao.guimei.vo.Category" %>
<%@ page import="com.lanqiao.guimei.dao.CateGoryDao" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lanqiao.guimei.dao.SaleProdDao" %>
<%@ page import="com.lanqiao.guimei.vo.Product" %>
<%@ page import="com.lanqiao.guimei.commons.Page" %><%--
  Created by IntelliJ IDEA.
  User: stone
  Date: 2019-08-16
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>贵美商城首页</title>

    <!-- Bootstrap -->
    <link href="css/bootstrapcss/bootstrap.css" rel="stylesheet">
    <link href="css/front/header.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .row{
            padding: 0px;
        }
        .little-tool{
            width: 100%;
            height: 180px;
            border: 1px solid #cccccc;
            border-radius: 3px;
        }
        .tool-heading a{
            padding-bottom: 6px;
        }
        .tool-heading a:hover{
            color: #ff9000;
            border-bottom: 2px solid #ff9000;
        }
        .tool-body{
            margin-top: 10px;
        }
        .tool-body input{

        }
        #chargePhone input,#chargePhone select{
            margin-top: 10px;
            width: 120px;
        }
        .tool-footer button{
            margin-top: 15px;
            border-radius: 3px;
            border: 1px solid #bbbbbb;
            background-color: #FF9000;
        }
        #ticket input:nth-child(3),#ticket input:nth-child(4),#ticket input:nth-child(5){
            margin-top: 10px;
            width: 100px;
            height: 20px;
        }
        #new-prod img{
            /*border: 1px solid #bbbbbb;*/
            /*border-radius: 2px;*/
        }
        #ad a{
            font-size: 12px;
            margin-top: 2px;
        }
        .panic-buying{
            height: 200px;
            margin-top: 10px;
        }
        .panic-buying:hover{
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="clearfix">
            <div class="col-md-10 col-md-offset-1">

                <%--<div class="row">--%>
                    <%--<div class="col-sm-12">--%>
                        <%--<div class="col-sm-offset-7" style="font-size: 14px">--%>
                            <%--<ul class="logo-header">--%>
                                <%--<li><a href="#"><i class="fa fa-shopping-cart"></i><span style="margin-left: 5px;">购物车</span></a></li>--%>
                                <%--<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span><span style="margin-left: 5px">我的订单</span></a></li>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn btn-success btn-xs">登录</a>--%>
                                <%--</li>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn btn-info btn-xs">注册</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        <%--</div>--%>
                        <%--<div class="row">--%>
                            <%--<div class="col-sm-4" style="margin: 0px; padding: 0px">--%>
                                <%--<img src="image/logo.jpg" alt="" class="img-responsive">--%>
                            <%--</div>--%>
                            <%--<div class="col-sm-8">--%>
                                <%--<img src="image/quality2.png" alt="" class="img-responsive">--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="row">--%>
                    <%--<div class="col-md-12">--%>

                        <%--<nav class="navbar navbar-default" style="margin-top: 15px">--%>
                            <%--<div class="container-fluid" style="height: 25px">--%>
                                    <%--<!-- Brand and toggle get grouped for better mobile display -->--%>
                                <%--<div class="navbar-header">--%>
                                    <%--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">--%>
                                        <%--<span class="sr-only">Toggle navigation</span>--%>
                                        <%--<span class="icon-bar"></span>--%>
                                        <%--<span class="icon-bar"></span>--%>
                                        <%--<span class="icon-bar"></span>--%>
                                    <%--</button>--%>
                                    <%--<a class="navbar-brand" href="#">首页</a>--%>
                                <%--</div>--%>

                                    <%--<!-- Collect the nav links, forms, and other content for toggling -->--%>
                                <%--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--%>
                                    <%--<ul class="nav navbar-nav">--%>
                                        <%--<li><a href="#">家用电器<span class="sr-only">(current)</span></a></li>--%>
                                        <%--<li><a href="#">服饰箱包</a></li>--%>
                                        <%--<li><a href="#">手&nbsp;&nbsp;&nbsp;机</a></li>--%>
                                        <%--<li><a href="#">数&nbsp;&nbsp;&nbsp;码</a></li>--%>
                                        <%--<li><a href="#">帮助中心</a></li>--%>
                                        <%--<li><a href="#">免费开店</a></li>--%>
                                        <%--<li><a href="#">全球咨询</a></li>--%>
                                    <%--</ul>--%>
                                    <%--<form class="navbar-form navbar-right">--%>
                                        <%--<div class="form-group ">--%>
                                            <%--<input type="text" class="form-control" placeholder="请输入关键字">--%>
                                        <%--</div>--%>
                                        <%--<button type="submit" class="btn btn-default">搜索</button>--%>
                                    <%--</form>--%>
                                <%--</div><!-- /.navbar-collapse -->--%>
                            <%--</div><!-- /.container-fluid -->--%>
                        <%--</nav>--%>
                    <%--</div>--%>
                <%--</div>--%>
                    <jsp:include page="header.jsp"/>


                <div class="row">

                    <div class="col-sm-3">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="padding: 0; height:25px; color: #ff5000">
                                <h5 class="panel-title text-center">家用电器</h5>
                            </div>
                            <%
                                List<Category> list1 = new CateGoryDao().queryByBigCtgr("家电");
                                List<Category> list2 = new CateGoryDao().queryByBigCtgr("服饰箱包");
                                List<Category> list3 = new CateGoryDao().queryByBigCtgr("手机");
                                List<Category> list4 = new CateGoryDao().queryByBigCtgr("数码");
                                pageContext.setAttribute("list1",list1);
                                pageContext.setAttribute("list2",list2);
                                pageContext.setAttribute("list3",list3);
                                pageContext.setAttribute("list4",list4);


                                SaleProdDao saleProdDao = new SaleProdDao();
                                int count = saleProdDao.queryAllRowHot();
                                Page<Product> productPage = new Page<>(count, 6);
                                List<Product> products = saleProdDao.queryHot(productPage);
                                session.setAttribute("hotProducts",products);

                                count=saleProdDao.queryAllRowNew();
                                productPage=new Page<>(count,4);
                                products = saleProdDao.queryNew(productPage);
                                session.setAttribute("newProduct",products);
                            %>
                            <div class="panel-body" style="padding: 5px">
                                <c:forEach var="item" items="${list1}" >
                                    <div class="col-sm-4" style="padding: 0px"><a href="front/saleprod/showsType.do?ctgrId=${item.ctgrId}">${item.ctgrName}</a></div>
                                </c:forEach>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading" style="padding: 0; height:25px; color: #ff5000">
                                <h5 class="panel-title text-center">服饰箱包</h5>
                            </div>
                            <div class="panel-body" style="padding: 5px">
                                <c:forEach var="item" items="${list2}" >
                                    <div class="col-sm-4" style="padding: 0px"><a href="front/saleprod/showsType.do?ctgrId=${item.ctgrId}">${item.ctgrName}</a></div>
                                </c:forEach>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" style="padding: 0; height:25px; color: #ff5000">
                                <h5 class="panel-title text-center">手机</h5>
                            </div>
                            <div class="panel-body" style="padding: 5px">
                                <c:forEach var="item" items="${list3}" >
                                    <div class="col-sm-4" style="padding: 0px"><a href="front/saleprod/showsType.do?ctgrId=${item.ctgrId}">${item.ctgrName}</a></div>
                                </c:forEach>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" style="padding: 0; height:25px; color: #ff5000">
                                <h5 class="panel-title text-center">数码</h5>
                            </div>
                            <div class="panel-body" style="padding: 5px">
                                <c:forEach var="item" items="${list4}" >
                                    <div class="col-sm-4" style="padding: 0px"><a href="front/saleprod/showsType.do?ctgrId=${item.ctgrId}">${item.ctgrName}</a></div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-6">

                        <div id="myCarousel" class="carousel slide">
                            <!-- 轮播（Carousel）指标 -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                                <li data-target="#myCarousel" data-slide-to="3"></li>
                            </ol>
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner" style="height: 250px">
                                <div class="item active">
                                    <img src="image/lunbo1.jpeg"  alt="First slide">
                                </div>
                                <div class="item">
                                    <img src="image/lunbo2.webp"  alt="Second slide">
                                </div>
                                <div class="item">
                                    <img src="image/lunbo3.webp"  alt="Third slide">
                                </div>
                                <div class="item">
                                    <img src="image/lunbo4.webp"  alt="Third slide">
                                </div>
                            </div>
                            <!-- 轮播（Carousel）导航 -->
                            <%--<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">--%>
                                <%--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>--%>
                                <%--<span class="sr-only">Previous</span>--%>
                            <%--</a>--%>
                            <%--<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">--%>
                                <%--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>--%>
                                <%--<span class="sr-only">Next</span>--%>
                            <%--</a>--%>
                        </div>

                        <div class="panel panel-default" style="margin-top: 10px">
                            <div class="panel-heading" style="width: 100%;height: 30px; padding: 5px 10px; background-color: #FF5000; color: #ffffff">
                                <h4 class="panel-title" style="float: left">
                                    疯狂抢购
                                </h4>
                                <a href="front/saleprod/showHot.do" style="float: right; color:#ffffff">查看更多</a>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <c:forEach var="item" items="${hotProducts}">
                                        <div class="col-md-4 panic-buying" style="padding: 5px">
                                            <a href="front/saleprod/showDetail.do?prodNo=${item.prodNo}">
                                                <img src="${item.image}" class="center-block" width="120" height="120" alt="">
                                            </a>
                                            <p style="color: red; margin-top: 5px">￥${item.price}</p>
                                            <p >${item.prodName}
                                                <%--<span>${fn:substring(item.descr,0,10)}...</span>--%>
                                            </p>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="width: 100%;height: 30px; padding: 5px 10px; background-color: #FF5000; color: #ffffff">
                                <h4 class="panel-title" style="float: left">
                                    公告栏
                                </h4>
                                <a href="#" style="float: right; color:#ffffff">全部公告</a>
                            </div>
                            <div class="panel-body" id="ad" style="padding: 10px 5px">
                                <div class="row" style="height: 45px">
                                    <div class="col-xs-4">
                                        <img src="image/toy.png" alt="">
                                    </div>
                                    <div class="col-xs-8">
                                        <a href="#" >大学要求老师开网店</a><br>
                                        <a href="#" >安全锤网上大热销</a><br>
                                        <a href="#" >商城竟为网购试衣间</a><br>
                                        <a href="#" >2万网上开十家连锁店</a><br>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading" style="width: 100%;height: 30px; padding: 5px 10px; background-color: #FF5000; color: #ffffff">
                                <h4 class="panel-title" style="float: left">
                                    新品上架
                                </h4>
                                <a href="front/saleprod/showNew.do" style="float: right; color:#ffffff">全部分类</a>
                            </div>
                            <div class="panel-body" id="new-prod">

                                <%--<c:forEach var="item" items="${newProduct}">--%>
                                    <%--<div>--%>
                                        <%--<a href=""><img src="${item.image}" alt="" style="width:50px; height: 56px;margin-top: 5px"></a>--%>
                                        <%--<a href="" style="margin-left: 10px">${fn:substring(item.descr,0,10)}...</a>--%>
                                    <%--</div>--%>
                                <%--</c:forEach>--%>

                                <c:forEach var="item" items="${newProduct}">
                                    <div class="row" style="padding: 0px;height: 50px;margin-top: 10px">
                                        <div class="col-xs-3">
                                            <a href="front/saleprod/showDetail.do?prodNo=${item.prodNo}"><img src="${item.image}" alt="" width="53" height="46"></a>
                                        </div>
                                        <div class="col-xs-9 text-center">
                                            <%--<a href="#" style="font-size: 12px;">${fn:substring(item.descr,0,13)}...</a>--%>
                                            <a href="#" style="font-size: 12px;margin-top: 5px">${item.prodName}</a>
                                        </div>
                                    </div>
                                </c:forEach>
                                <%--<div class="row" style="padding: 0px;height: 45px;margin-top: 10px">--%>
                                    <%--<div class="col-xs-3">--%>
                                        <%--<img src="image/show2.jpg" alt="">--%>
                                    <%--</div>--%>
                                    <%--<div class="col-xs-9 text-center">--%>
                                        <%--<a href="#" style="font-size: 12px;line-height: 45px">大学要求老师开网店</a>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                                <%--<div class="row" style="padding: 0px;height: 45px;margin-top: 10px">--%>
                                    <%--<div class="col-xs-3">--%>
                                        <%--<img src="image/show3.jpg" alt="">--%>
                                    <%--</div>--%>
                                    <%--<div class="col-xs-9 text-center">--%>
                                        <%--<a href="#" style="font-size: 12px;line-height: 45px">黑眼圈推荐，白美不停</a>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                                <%--<div class="row" style="padding: 0px;height: 45px;margin-top: 10px">--%>
                                    <%--<div class="col-xs-3">--%>
                                        <%--<img src="image/show4.jpg" alt="">--%>
                                    <%--</div>--%>
                                    <%--<div class="col-xs-9 text-center">--%>
                                        <%--<a href="#" style="font-size: 12px;line-height: 45px">瘦身狂潮风，修行之选</a>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            </div>
                        </div>

                        <div class="little-tool">
                            <div class="tool-heading" style="padding: 15px">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <a href="#">话费</a>
                                    </div>
                                    <div class="col-xs-4">
                                        <a href="#">机票</a>
                                    </div>
                                    <div class="col-xs-4">
                                        <a href="#">酒店</a>
                                    </div>
                                </div>
                            </div>
                            <div class="tool-body text-center">

                                <div id="chargePhone" style="display: block">
                                    <input type="text" id="phone" placeholder="请输入手机号码">
                                    <select name="" id="">
                                        <option value="50">50元</option>
                                        <option value="100">100元</option>
                                        <option value="150">150元</option>
                                        <option value="200">200元</option>
                                        <option value="250">250元</option>
                                        <option value="300">300元</option>
                                    </select>
                                </div>
                                <div id="ticket" style="display: none">
                                    <input type="radio" name="">单程
                                    <input type="radio" name="">往返
                                    <br>
                                    出发<input type="text" name=""><br>
                                    到达<input type="text" name=""><br>
                                    日期<input type="date" name=""><br>
                                </div>
                            </div>
                            <div class="tool-footer text-center">
                                <button type="button">查看折扣</button>
                            </div>

                            </div>
                        </div>
                    </div>
                </div>
            <jsp:include page="footer.jsp"/>

            </div>
        </div>
    </div>
</div>



<!-- jQuery -->
<script src="js/jquery-2.2.4.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<script>
    //图片自动3秒轮播
    $(function () {
        //$('#header').load('herder.html');
        $('#myCarousel').carousel({interval:3000});
    });
</script>
</body>
</html>
